import { View } from "@tarojs/components";
import React, { Component } from "react";
import Echarts from '../components/Echarts'
import Taro from '@tarojs/taro'
import {regionalStatistics} from '../api/regional-statistics'
import moment from 'moment';
import {SPECIAL_REGION} from '../assets/echarts-map/region-data'
// 地图
export default class RegionalStatistics extends Component{


    static defaultProps = {
        beginDte: null,
        endData: null,
        keywords:''
    }

  

    setChartOptions(chart) {
        let beginData = moment().subtract(14, 'days').format('YYYY-MM-DD');
        let endData = moment().format("YYYY-MM-DD");
        let keywords = moment().subtract(14, 'days').format('YYY-MM-DD');
        regionalStatistics(beginData, endData, keywords).then(res => {
            console.log(res.data.data);
            const data = res.data.data.map(item => ({ name: item.word, value: item.number }));
            data.forEach(item => {
                for (let city of SPECIAL_REGION) {
                    if (item.name.include(city)) {
                        item.name = city;
                        return
                    }
                }
            });
            
            let option = {
                title: {
                    text: 'USA Population Estimates (2012)',
                    subtext: 'Data from www.census.gov',
                    sublink: 'http://www.census.gov/popest/data/datasets.html',
                    left: 'right'
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2,
                    formatter: function (params) {
                        var value = (params.value + '').split('.');
                        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                        return params.seriesName + '<br/>' + params.name + ': ' + value;
                    }
                },
                visualMap: {
                    left: 'right',
                    min: 500000,
                    max: 38000000,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    },
                    text: ['High', 'Low'],           // 文本，默认为数值文本
                    calculable: true
                },
                toolbox: {
                    show: true,
                    //orient: 'vertical',
                    left: 'left',
                    top: 'top',
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: 'USA PopEstimates',
                        type: 'map',
                        roam: true,
                        map: 'USA',
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        // 文本位置修正
                        textFixed: {
                            Alaska: [20, -20]
                        },
                        data: data
                ]
            }
        ]
            chart.setOption(option);
            
        };
            
        // })

    }

    }









    render() {
          let height = Taro.pxTransform(350)
        return (
            <View>
                
                <View className='caption '>
                    地域统计
                </View>
                <Echarts setChartOptions={this.setChartOptions.bind(this)} height={height}/>
            </View>
        )
    }
}